<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="兴趣爱好"> </mh-header>
      <div class="in-box bg-w mh-pd">
        <div class="in-panel" v-for="(item, index) in interest" :key="index">
          <div class="in-top flex">
            <img :src="item.ico" alt="图标">
            <span v-text="item.name">-</span>
          </div>
          <div class="in-cont flex">
            <span class="in-item"
                  :class="{active: subItem.active}"
                  v-for="(subItem, subIndex) in item.ways"
                  :key="'sub'+subIndex"
                  v-text="subItem.name"
                  @tap="handleInterest(index,subIndex)"
            >--</span>
          </div>
        </div>

        <div class="btn-row">
          <button type="button" class="mui-btn-block mh-btn">保存</button>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "interest",
    data () {
      return {
        interest: [
          {
            name: '生活方式',
            ico: require('../../assets/images/ico/ic_p_shfs.png'),
            ways: [
              {
                interId: '1001',
                name: '汽车',
                active: true
              },
              {
                interId: '1002',
                name: '阅读',
                active: true
              },
              {
                interId: '1003',
                name: '旅游',
                active: false
              },
              {
                interId: '1004',
                name: '跳伞',
                active: true
              },
              {
                interId: '1005',
                name: '户外',
                active: false
              },
              {
                interId: '1006',
                name: '户外',
                active: false
              }
            ]
          },
          {
            name: '体育习惯',
            ico: require('../../assets/images/ico/ic_p_tyxg.png'),
            ways: [
              {
                interId: '2001',
                name: '跑步',
                active: true
              },
              {
                interId: '2002',
                name: '羽毛球',
                active: false
              }
            ]
          },
          {
            name: '休闲娱乐',
            ico: require('../../assets/images/ico/ic_p_xxyl.png'),
            ways: [
              {
                interId: '3001',
                name: '游戏',
                active: true
              },
              {
                interId: '3002',
                name: '旅游',
                active: false
              }
            ]
          },
          {
            name: '饮食偏好',
            ico: require('../../assets/images/ico/ic_p_ysph.png'),
            ways: [
              {
                interId: '4001',
                name: '甜食',
                active: true
              },
              {
                interId: '4002',
                name: '辛辣',
                active: false
              }
            ]
          }
        ]
      }
    },
    methods: {
      handleInterest (i, j) {
        this.$set(this.interest[i].ways[j], 'active', !this.interest[i].ways[j].active)
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  .in-top {
    span {
      font-size: 1.4rem;
      color: #333;
    }
    img {
      width: 1.8rem;
      height: auto;
      margin-right: 1rem;
    }
  }
  .in-cont {
    flex-wrap: wrap;
    padding-left: 3rem;
    padding-top: 1rem;
  }
  .in-item {
    display: inline-block;
    padding: .2rem .8rem;
    margin-right: 2.5%;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: #333;
    border: 1px solid #dedede;
    border-radius: 1.2rem;
    &.active {
      background: linear-gradient(180deg, #dd65a1 34%, #fa625a 100%);
      color: #fff;
      border: 1px solid #fa625a;
    }
  }
  .btn-row {
    margin-top: 3rem;
  }
</style>
